<template>
	<view class="comment-container">
		<view class="header">
			<image :src="info.user_head" mode="widthFix" style="width: 68rpx;height: 68rpx;overflow: hidden;border-radius: 68rpx;"></image>
			<view class="name">
				{{info.user_name}}
			</view>
			<view class="time">
				{{info.create_at}}
			</view>
		</view>
		<view class="content">
			{{info.content}}
		</view>
		<template v-if="info.file">
			<view class="image-container">
				<image :src="item" class="img" mode="aspectFill" style="width: 170rpx;height: 170rpx;" v-for="(item,index) in info.file" :key="index" @click="preview(item)"></image>
			</view>
		</template>
		
		
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				default: () => {
					return {}
				}
			}
		},
		methods: {
			preview(url){
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment-container{
		.header{
			display: flex;
			align-items: center;
			.name{
				margin-left: 20rpx;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
				line-height: 46rpx;
			}
			.time{
				flex: 1;
				text-align: right;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
				line-height: 44rpx;
			}
		}
		.content{
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #000000;
			line-height: 42rpx;
		}
		.image-container{
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.img{
				margin-right: 10rpx;
			}
		}
	}
</style>